import React, { Component } from 'react'

export class Header extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         value:"",
      }
    }

    // 双向数据绑定 
    changeValue =(e) => {
        this.setState({
            value:e.target.value
        })
    }

  render() {
      const { value } = this.state;
      const { add } = this.props;
    return (
      <div className='header'>
          <h4>TodoList</h4>
          <input type="text" value={value} onChange={this.changeValue}/>
          <button onClick={() => {
              add(value)
              this.setState({ //清空输入框
                  value:"",
              })
          }}>添加</button>
      </div>
    )
  }
}

export default Header